<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad"
    >
      <article-itme
        v-for="(item, index) in Article_list"
        :key="index"
        :is_Show="false"
        :artItem="item"
        @click.native="go_path(item.art_id)"
      />
    </van-list>
  </div>
</template>

<script>
// 图片403或者404
// 前端=>后端
// 后端保存到的本地是别的服务器的地址
// 前端请求图片地址的时候403没有权限（防盗链），服务器在接受请求的时判断，Reffer字段是不是自己的地址，不是就是无权访问
// 解决办法： meat里面不带Reffer字段，让其判断失效
// 前端请求图片地址的时候404图片别的服务器已经删除（放个默认图片代替）
import { searchSure } from '@/api/index'
import articleItme from '@/views/Home/components/Articleitme'
export default {
  name: 'SearchResult',
  data () {
    return {
      page: 1,
      Article_list: [],
      loading: false,
      finished: false
    }
  },
  created () {
    this.userSearch_body()
  },
  components: {
    articleItme
  },
  methods: {
    async userSearch_body () {
      await searchSure({
        q: this.$route.params.kw,
        page: this.page
      })
        .then((res) => {
          if (res.status !== 200) return
          const {
            data: {
              data: { results }
            }
          } = res
          this.Article_list = [...this.Article_list, ...results] // 文章数据
          //   加载状态结束
          this.loading = false
          const counttotal = res.data.data.total_count
          const istotal = this.Article_list.length
          if (istotal >= counttotal) {
            this.finished = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 触底加载
    onLoad () {
      if (this.Article_list.length === 0) return // 页面没有数据就不加载了
      this.page++
      this.userSearch_body()
    },
    // 点击跳转详情
    go_path (artid) {
      this.$router.push({
        path: '/ArticeDetail',
        query: {
          art_id: artid
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
/deep/ .van-nav-bar__content {
    background: #007BFF;
}
/deep/ .van-icon {
  color: #fff;
}
</style>
